{% extends 'public/layout.html' %}

{% block load_css %}
    <link href="/static/css/plugins/iCheck/custom.css" rel="stylesheet">

    <link href="/static/css/plugins/chosen/bootstrap-chosen.css" rel="stylesheet">

    <link href="/static/css/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css" rel="stylesheet">

    <link href="/static/css/plugins/colorpicker/bootstrap-colorpicker.min.css" rel="stylesheet">

    <link href="/static/css/plugins/cropper/cropper.min.css" rel="stylesheet">

    <link href="/static/css/plugins/switchery/switchery.css" rel="stylesheet">

    <link href="/static/css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">

    <link href="/static/css/plugins/nouslider/jquery.nouislider.css" rel="stylesheet">

    <link href="/static/css/plugins/datapicker/datepicker3.css" rel="stylesheet">

    <link href="/static/css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">
    <link href="/static/css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">

    <link href="/static/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">

    <link href="/static/css/plugins/clockpicker/clockpicker.css" rel="stylesheet">

    <link href="/static/css/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet">

    <link href="/static/css/plugins/select2/select2.min.css" rel="stylesheet">

    <link href="/static/css/plugins/touchspin/jquery.bootstrap-touchspin.min.css" rel="stylesheet">

    <link href="/static/css/plugins/dualListbox/bootstrap-duallistbox.min.css" rel="stylesheet">

    <link href="/static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

{% endblock %}

{% block mbx %}
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-10">
            <h2></h2>
            <ol class="breadcrumb">
                <li>
                    <a href="{% url 'index' %}">仪表盘</a>
                </li>

                <li>
                    <a>资源管理</a>
                </li>


                <li class="active">
                    <strong>修改机房IDC</strong>
                </li>

            </ol>
        </div>
        <div class="col-sm-2">
        </div>
    </div>
{% endblock %}

{% block body %}
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>修改机房IDC</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">


                        <form class="form-horizontal" enctype="multipart/form-data" id="create_form">
                            {% csrf_token %}
                            <h3>机房信息</h3>
                            <div class="form-group"><label class="col-md-2 control-label">简称</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" placeholder="简称" name="name" value="{{ idc_obj.name }}">
                                </div>
                            </div>

                            <div class="form-group"><label class="col-md-2 control-label">名称</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" placeholder="名称" name="name_cn" value="{{ idc_obj.name_cn }}">
                                </div>
                            </div>


                            <div class="form-group"><label class="col-md-2 control-label">机房地址</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" placeholder="机房地址" name="address" value="{{ idc_obj.address }}">
                                </div>
                            </div>

                            <div class="form-group"><label class="col-md-2 control-label">机房电话</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" placeholder="机房电话" name="phone" value="{{ idc_obj.phone }}">
                                </div>
                            </div>

                            <div class="form-group"><label class="col-md-2 control-label">机房邮箱</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" placeholder="机房邮箱" name="email" value="{{ idc_obj.email }}">
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>

                            <h3>机房联系人</h3>
                            <div class="form-group"><label class="col-md-2 control-label">联系人姓名</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" placeholder="联系人姓名" name="username" value="{{ idc_obj.username }}">
                                </div>
                            </div>

                            <div class="form-group"><label class="col-md-2 control-label">联系人手机号</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" placeholder="联系人手机号" name="username_phone" value="{{ idc_obj.username_phone }}">
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <input type="hidden" value="{{ idc_obj.id }}" name="idc_id">
                                    <button class="btn btn-white" type="reset" onclick="history.back()">返回</button>
                                    <button class="btn btn-primary" type="submit">提交</button>
                                </div>
                            </div>
                        </form>


                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block load_js %}
    <!-- Chosen -->
    <script src="/static/js/plugins/chosen/chosen.jquery.js"></script>

    <!-- JSKnob -->
    <script src="/static/js/plugins/jsKnob/jquery.knob.js"></script>

    <!-- Input Mask-->
    <script src="/static/js/plugins/jasny/jasny-bootstrap.min.js"></script>

    <!-- Data picker -->
    <script src="/static/js/plugins/datapicker/bootstrap-datepicker.js"></script>

    <!-- NouSlider -->
    <script src="/static/js/plugins/nouslider/jquery.nouislider.min.js"></script>

    <!-- Switchery -->
    <script src="/static/js/plugins/switchery/switchery.js"></script>

    <!-- IonRangeSlider -->
    <script src="/static/js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>

    <!-- iCheck -->
    <script src="/static/js/plugins/iCheck/icheck.min.js"></script>

    <!-- MENU -->
    <script src="/static/js/plugins/metisMenu/jquery.metisMenu.js"></script>

    <!-- Color picker -->
    <script src="/static/js/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>

    <!-- Clock picker -->
    <script src="/static/js/plugins/clockpicker/clockpicker.js"></script>

    <!-- Image cropper -->
    <script src="/static/js/plugins/cropper/cropper.min.js"></script>

    <!-- Date range use moment.js same as full calendar plugin -->
    <script src="/static/js/plugins/fullcalendar/moment.min.js"></script>

    <!-- Date range picker -->
    <script src="/static/js/plugins/daterangepicker/daterangepicker.js"></script>

    <!-- Select2 -->
    <script src="/static/js/plugins/select2/select2.full.min.js"></script>

    <!-- TouchSpin -->
    <script src="/static/js/plugins/touchspin/jquery.bootstrap-touchspin.min.js"></script>

    <!-- Tags Input -->
    <script src="/static/js/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>

    <!-- Dual Listbox -->
    <script src="/static/js/plugins/dualListbox/jquery.bootstrap-duallistbox.js"></script>

    <script src="/static/js/plugins/validate/jquery.validate.js"></script>
    <script src="/static/js/plugins/validate/messages_zh.js"></script>

    <script src="/static/js/plugins/sweetalert/sweetalert.min.js"></script>


    <script>

        $(document).ready(function () {
            $("#create_form").validate({
                rules: {
                    name: {
                        required: true,
                        maxlength: 10
                    },
                    name_cn: {
                        required: true,
                        maxlength: 32
                    },
                    address: {
                        maxlength: 64
                    },
                    phone: {
                        required: true,
                        maxlength: 11
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    username: {
                        required: true,
                        maxlength: 32
                    },
                    username_phone: {
                        required: true,
                        maxlength: 11
                    }
                }, submitHandler: function () {
                    str = $('#create_form').serialize();
                    $.post('{% url 'idc_modify' %}', str, function (res) {
                        if (res.status == 0) {
                            swal({
                                title: res.msg,
                                type: 'success',
                                confirmButtonText: "OK"
                            }, function () {
                                window.location.href = '{% url 'idc_list' %}';
                            });
                        } else {
                            swal({
                                title: res.msg,
                                type: 'error',
                                confirmButtonText: "知道了"
                            });
                        }
                    });
                }
            });
        });

    </script>
{% endblock %}